@import "../../themes/ionic.globals.ios";

// iOS Card
// --------------------------------------------------

/// @prop - Margin top of the card
$card-ios-margin-top:                  12px !default;

/// @prop - Margin right of the card
$card-ios-margin-right:                12px !default;

/// @prop - Margin bottom of the card
$card-ios-margin-bottom:               12px !default;

/// @prop - Margin left of the card
$card-ios-margin-left:                 12px !default;

/// @prop - Padding top of the card
$card-ios-padding-top:                 13px !default;

/// @prop - Padding right of the card
$card-ios-padding-right:               16px !default;

/// @prop - Padding bottom of the card
$card-ios-padding-bottom:              14px !default;

/// @prop - Padding left of the card
$card-ios-padding-left:                16px !default;

/// @prop - Padding top of the media on the card
$card-ios-padding-media-top:           10px !default;

/// @prop - Padding bottom of the media on the card
$card-ios-padding-media-bottom:        9px !default;

/// @prop - Background color of the card
$card-ios-background-color:            $list-ios-background-color !default;

/// @prop - Box shadow color of the card
$card-ios-box-shadow-color:            rgba(0, 0, 0, .3) !default;

/// @prop - Box shadow of the card
$card-ios-box-shadow:                  0 1px 2px $card-ios-box-shadow-color !default;

/// @prop - Border radius of the card
$card-ios-border-radius:               2px !default;

/// @prop - Font size of the card
$card-ios-font-size:                   1.4rem !default;

/// @prop - Color of the card text
$card-ios-text-color:                  #666 !default;

/// @prop - Font size of the card title
$card-ios-title-font-size:             1.8rem !default;

/// @prop - Padding of the card title
$card-ios-title-padding:               8px 0 8px 0 !default;

/// @prop - Margin of the card title
$card-ios-title-margin:                2px 0 2px !default;

/// @prop - Color of the card title
$card-ios-title-text-color:            #222 !default;

/// @prop - Font size of the card header
$card-ios-header-font-size:            1.6rem !default;

/// @prop - Font weight of the card header
$card-ios-header-font-weight:          500 !default;

/// @prop - Padding of the card header
$card-ios-header-padding:              16px !default;

/// @prop - Color of the card header
$card-ios-header-color:                #333 !default;


.card-ios {
  margin: $card-ios-margin-top $card-ios-margin-right $card-ios-margin-bottom $card-ios-margin-left;

  width: calc(100% - #{($card-ios-margin-right + $card-ios-margin-left)});

  border-radius: $card-ios-border-radius;
  font-size: $card-ios-font-size;

  background: $card-ios-background-color;
  box-shadow: $card-ios-box-shadow;
}

.card-ios ion-list {
  margin-bottom: 0;
}

.card-ios > .item:last-child,
.card-ios > .item:last-child .item-inner,
.card-ios > .item-wrapper:last-child .item {
  border-bottom: 0;
}

.card-ios .item-ios.item-block .item-inner {
  border: 0;
}

.card-content-ios {
  padding: $card-ios-padding-top $card-ios-padding-right $card-ios-padding-bottom $card-ios-padding-left;

  font-size: $card-ios-font-size;
  line-height: 1.4;
}

.card-header-ios {
  padding: $card-ios-header-padding;

  font-size: $card-ios-header-font-size;
  font-weight: $card-ios-header-font-weight;
  color: $card-ios-header-color;
}

.card-header-ios + .card-content-ios,
.card-ios .item + .card-content-ios {
  padding-top: 0;
}

.card-ios ion-note[item-left],
.card-ios ion-note[item-right] {
  font-size: 1.3rem;
}

.card-title-ios {
  display: block;

  margin: $card-ios-title-margin;
  padding: $card-ios-title-padding;

  font-size: $card-ios-title-font-size;
  line-height: 1.2;
  color: $card-ios-title-text-color;
}

.card-ios h1 {
  margin: 0 0 2px;

  font-size: 2.4rem;
  font-weight: normal;
}

.card-ios h2 {
  margin: 2px 0;

  font-size: 1.6rem;
  font-weight: normal;
}

.card-ios h3,
.card-ios h4,
.card-ios h5,
.card-ios h6 {
  margin: 2px 0;

  font-size: 1.4rem;
  font-weight: normal;
}

.card-ios p {
  margin: 0 0 2px;

  font-size: 1.4rem;
  color: $card-ios-text-color;
}

.card-ios + ion-card {
  margin-top: 0;
}


// Generate iOS Card Colors
// --------------------------------------------------

@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {

  .card-ios .text-ios-#{$color-name} {
    color: $color-base;
  }

  .card-ios-#{$color-name} {
    color: $color-contrast;
    background-color: $color-base;

    .card-header-ios,
    .card-title-ios,
    .card-content-ios,
    p {
      color: $color-contrast;
    }

    @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
      .text-ios-#{$color-name},
      .card-header-ios-#{$color-name},
      .card-title-ios-#{$color-name},
      .card-content-ios-#{$color-name} {
        color: $color-base;
      }
    }
  }

  .card-header-ios-#{$color-name},
  .card-title-ios-#{$color-name},
  .card-content-ios-#{$color-name} {
    color: $color-base;
  }

}
